import React from 'react'

interface ProgressBarProps {
  progress: {
    current: number
    total: number
    percentage: number
    stage: string
    estimatedTimeRemaining?: number
  }
  status?: 'pending' | 'running' | 'completed' | 'failed'
  showDetails?: boolean
  className?: string
}

const ProgressBar: React.FC<ProgressBarProps> = ({
  progress,
  status = 'running',
  showDetails = true,
  className = ''
}) => {
  const getProgressBarColor = () => {
    switch (status) {
      case 'completed':
        return 'bg-green-500'
      case 'failed':
        return 'bg-red-500'
      case 'running':
        return 'bg-blue-500'
      default:
        return 'bg-gray-300'
    }
  }

  const getProgressBarBgColor = () => {
    switch (status) {
      case 'completed':
        return 'bg-green-100'
      case 'failed':
        return 'bg-red-100'
      case 'running':
        return 'bg-blue-100'
      default:
        return 'bg-gray-100'
    }
  }

  const formatTime = (seconds: number) => {
    if (seconds < 60) {
      return `${Math.round(seconds)}秒`
    } else if (seconds < 3600) {
      return `${Math.round(seconds / 60)}分钟`
    } else {
      return `${Math.round(seconds / 3600)}小时`
    }
  }

  return (
    <div className={`space-y-2 ${className}`}>
      {/* 进度条主体 */}
      <div className="relative">
        <div className={`w-full h-3 rounded-full ${getProgressBarBgColor()}`}>
          <div
            className={`h-full rounded-full transition-all duration-300 ease-out ${getProgressBarColor()}`}
            style={{ width: `${Math.min(progress.percentage, 100)}%` }}
          />
        </div>
        
        {/* 百分比显示 */}
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-xs font-medium text-gray-700">
            {Math.round(progress.percentage)}%
          </span>
        </div>
      </div>

      {/* 详细信息 */}
      {showDetails && (
        <div className="space-y-1">
          {/* 当前阶段 */}
          <div className="flex items-center justify-between text-sm">
            <span className="text-gray-600">{progress.stage}</span>
            <span className="text-gray-500">
              {progress.current} / {progress.total}
            </span>
          </div>

          {/* 预计剩余时间 */}
          {progress.estimatedTimeRemaining && progress.estimatedTimeRemaining > 0 && (
            <div className="text-xs text-gray-500">
              预计剩余时间: {formatTime(progress.estimatedTimeRemaining)}
            </div>
          )}

          {/* 状态指示器 */}
          <div className="flex items-center space-x-2">
            <div className={`w-2 h-2 rounded-full ${
              status === 'running' ? 'bg-blue-500 animate-pulse' :
              status === 'completed' ? 'bg-green-500' :
              status === 'failed' ? 'bg-red-500' :
              'bg-gray-400'
            }`} />
            <span className="text-xs text-gray-600">
              {status === 'pending' && '等待中'}
              {status === 'running' && '运行中'}
              {status === 'completed' && '已完成'}
              {status === 'failed' && '已失败'}
            </span>
          </div>
        </div>
      )}
    </div>
  )
}

export default ProgressBar
